import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import { defineStore } from 'pinia';

export const useBreadStore = defineStore('bread', () => {
  const route = useRoute();
  const breadcrumbList = ref([]);

  watch(
    () => route,
    (newRoute) => {
      if (newRoute.meta.level) {
        breadcrumbList.value = [
          {
            path: newRoute.matched[1]?.path,
            title: newRoute.matched[1]?.meta.title
          },
          {
            path: newRoute.path,
            title: newRoute.meta.title,
            query: newRoute.query
          }
        ];
      } else {
        breadcrumbList.value.push({
          path: newRoute.path,
          title: newRoute.meta.title,
          query: newRoute.query
        });
      }
    },
    { immediate: true, deep: true }
  );

  return { breadcrumbList };
});
